<!--
 * @Author: wpp 906008377@qq.com
 * @Date: 2025-03-27 11:42:51
 * @LastEditors: wpp 906008377@qq.com
 * @LastEditTime: 2025-03-27 14:25:46
 * @FilePath: \vue-project\src\views\component\model.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="model-box">
        <div>num: {{ num }}</div>
        <div>minNum: {{ minNumCom }}</div>
        <div>maxNum: {{ maxNum }}</div>
        <div>maxNumCom: {{ maxNumCom }}</div>
        <el-button @click="numTestFn" class="marginTop">测试</el-button>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'
defineOptions({
    name: 'ModelPage'
})

const props = defineProps({
    minNum: {
        type: Number,
        default: 0
    }
})
const minNumCom = ref(props.minNum)
const emit = defineEmits(['update:minNum'])
const updateMinNum = () => {
    minNumCom.value++
    emit('update:minNum', minNumCom.value)
}


const num = defineModel({ default: 5 })
const [maxNum, modifiers] = defineModel('maxNum', { default: 10 })

const maxNumCom = computed(() => {
    console.log(maxNum, modifiers)
    return maxNum.value
})

const numTestFn = () => {
    num.value++
    maxNum.value++
    updateMinNum()
}


</script>

<style scoped lang="scss">
.marginTop {
    margin-top: 10px;
}

.model-box {
    border: 1px solid #f0f0f0;
    width: 150px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
</style>